<template>
    <view :class="$style.filter">
        <view :class="$style.row">
            <view :class="$style.name">年龄(岁)</view>
            <view :class="$style.rangeContainer" class="p-l-r">
                <nut-range :class="$style.range" v-model="formData.age" :step="1" :max="80" :min="18" range></nut-range>
            </view>
        </view>
        <view :class="$style.row">
            <view :class="$style.name">身高(cm)</view>
            <view :class="$style.rangeContainer" class="p-l-r">
                <nut-range :class="$style.range" v-model="formData.height" :step="1" :max="190" :min="130" range></nut-range>
            </view>
        </view>
        <view :class="$style.row">
            <view :class="$style.name">婚况(多选)</view>
            <view class="m-t-10">
                <WithAllCheckbox name-field="name" value-field="code" v-model="formData.maritalStatus" :options="maritalStatusOptions" />
            </view>
        </view>
        <view :class="$style.row">
            <view :class="$style.name">最低学历</view>
            <view class="m-t-10">
                <nut-radio-group  v-model="formData.education" direction="horizontal">
                    <nut-radio :label="0" shape="button">不限</nut-radio>
                    <nut-radio v-for="item in educationOptions" :key="item.code" :label="item.code" shape="button">{{ item.name }}</nut-radio>
                </nut-radio-group>
            </view>
        </view>

        <view :class="$style.row">
            <nut-button block type="primary">确定</nut-button>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { getEducationApi, getGenderItemsApi, getMaritalStatusApi } from '@/api/Common';
    import { ref } from 'vue';
    import WithAllCheckbox from '@/components/WithAllCheckbox.vue'

    const formData = ref<any>({
        age : [18, 80],
        height : [130, 190],
        gender : 0,
        allMaritalStatus : true,
        maritalStatus : [],
        education : 0
    })

    const genderOptions = ref<any[]>([])
    const maritalStatusOptions = ref<any[]>([])
    const educationOptions = ref<any[]>([])


    getGenderItemsApi().then(r => {
        genderOptions.value = r
    })

    getMaritalStatusApi().then(r => {
        maritalStatusOptions.value = r
    })

    getEducationApi().then(r => {
        educationOptions.value = r
    })

    
    
</script>

<style lang="scss" module>
    .filter{
        padding: $space;
    }

    .row{
        .name{
            font-size: 24px;
        }

        margin-top: 40px;
        &:first-of-type{
            margin-top: 0;
        }
    }

    .rangeContainer{
        margin-top: 50px;
    }

    .range{
        --nut-range-bar-btn-width : 30px;
        --nut-range-bar-btn-height : 30px;
        :global(.number){
            padding-bottom: 10px;
        }

        :global(.nut-range-min) {
            display: none;
        }

        :global(.nut-range-max) {
            display: none;
        }

        :global(.nut-range-show-number) {
            margin: 0 00px;
        }
    }

    .rangeMark{
        display: flex;
        justify-content: space-between;
        font-size: 24px;
        margin-top: 15px;
    }
</style>